<template>
  <div class="body">
    <div class="main-title">
      <ul class="title">
        <!-- <li class="active" @click="handleChange(0)">实时监测</li>
        <li @click="handleChange(1)">
          园林系统分析
        </li>
        <li>园林审批管理</li> -->
        <Title />

        <!-- <li class="title">
        </li> -->
        <!-- <li>园林巡查管理</li>
        <li>园林督查考核</li>
        <li>园林养护系统</li> -->
      </ul>
    </div>
    <div class="main" v-show="isShow.num == 0">
      <div class="main-top flex justify-between">
        <div class="con-lef">
          <!-- 天气 -->
          <div class="con-lef1">
            <Weather />
          </div>
          <!-- 巡查记录 -->
          <div class="con-lef2">
            <Inspection />
          </div>
        </div>
        <!-- 地图 -->
        <div class="con-cen">
          <ParkMap />
        </div>
        <div class="con-rig">
          <div class="con-rig1">
            <DetailInfo />
          </div>
          <!-- 当前公园人流量分析 -->
          <div class="con-rig2">
            <Activity />
          </div>
        </div>
      </div>
      <div class="main-bot flex justify-between">
        <!-- 公园古树分析 -->
        <div class="con-bot1">
          <Cylinder />
        </div>
        <!-- 公园热度滚动 -->
        <div class="con-bot2">
          <!-- <p>当前区域公园热度排名</p> -->
          <div>
            <Ranking />
          </div>
        </div>
        <div class="con-bot3">
          <People />
        </div>
      </div>
    </div>

    <div v-show="isShow.num == 1">
      <DataAly />
    </div>
  </div>
</template>

<script setup lang="ts">
import Weather from './components/Weather.vue'
import ParkMap from './components/ParkMap.vue'
import Title from './components/Title.vue'
import Inspection from './components/Inspection.vue'
import Cylinder from './components/Cylinder.vue'
import DetailInfo from './components/DetailInfo.vue'
import People from './components/People.vue'
import Ranking from './components/Ranking.vue'
import DataAly from './components/DataAly.vue'
import Activity from './components/echars/Activity.vue'
import { reactive, onMounted, onBeforeUnmount } from 'vue'
// 页面适配
import autofit from 'autofit.js'
const isShow = reactive({
  num: 0
})
// const handleChange = (idx) => {
//   isShow.num = idx
// }
onMounted(() => {
  autofit.init({
    dh: 1080,
    dw: 1920,
    el: 'body',
    resize: true,
    ignore: [
      {
        el: '.gaodeMap', //必填
        height: '30rem', //可选，需注明单位
        width: '80%', //可选，需注明单位
        scale: 1.2, //可选：回放程度，基于主元素缩放后的大小
        fontSize: 30 //可选，如果自定义缩放后文字大小不合适，可以在这里设置文字大小
      }
    ]
  })
})
onBeforeUnmount(() => {
  autofit.off()
})
</script>

<style lang="scss" scoped>
.body {
  height: 100vh;
  height: 100%;
  background-color: #0d283f;
  color: #fff;
  // padding: 0 1rem;

  .main-title {
    // padding: 1rem 2rem;
    padding-top: 1rem;
    display: flex;
    justify-content: center;

    ul {
      li {
        padding: 1rem;
        height: 3rem;
        line-height: 3rem;
      }

      li.active {
        background: skyblue;
        color: orange;
        cursor: pointer;
      }
    }
  }

  .main {
    height: 100%;
    // border: .1rem solid red;
    display: flex;
    flex-direction: column;

    // main上边
    .main-top {
      height: 60%;

      .con-lef {
        height: 100%;
        // border: .1rem solid red;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .con-lef1 {
          width: 35rem;
          height: 49%;
          background-color: #0d283f;
          border: 0.1rem solid blue;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .con-lef2 {
          width: 35rem;
          height: 49%;
          // border: 0.1rem solid blue;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      // 中间地图
      .con-cen {
        flex: 1;
        height: 100%;
        border: 0.2rem solid #031f2d;

        // padding: 1rem;
        box-sizing: border-box;
      }

      // 右边上两个小盒子
      .con-rig {
        height: 100%;
        // border: .1rem solid red;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .con-rig1 {
          width: 35rem;
          height: 49%;
          border: 0.1rem solid blue;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .con-rig2 {
          width: 35rem;
          height: 49%;
          border: 0.1rem solid blue;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    // 底部盒子
    .main-bot {
      height: 32%;

      .con-bot1 {
        width: 35rem;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        // border: .1rem solid purple;
        // margin-top: 1rem;
      }

      .con-bot3 {
        width: 35rem;
        height: 100%;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        // border: .1rem solid purple;
        margin-top: 1rem;
      }

      // 底部盒子2
      .con-bot2 {
        margin: 0.1rem;
        // padding: 0.1rem;
        flex: 1;
        height: 100%;
        border: 0.1rem solid blue;
      }
    }
  }
}
</style>
